import { Form, Input, message, Modal } from 'antd'
import TextArea from 'antd/es/input/TextArea'
import React from 'react'
import { createBook } from '~/api/book'
import Coverupload from './Coverupload'

interface CreateBookModalProps {
    isOpen: boolean
    handleClose: () => void
}

export interface CreateBook {
    name: string
    author: string
    desciption: string
    cover: string
}

const layout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 18 },
}

export default function CreateBookModal(props: CreateBookModalProps) {
    const [form] = Form.useForm<CreateBook>()

    async function handleOk() {
        await form.validateFields()
        const values = form.getFieldsValue()
        try {
            const res = await createBook(values)
            message.success('创建成功')
            form.resetFields()
            props.handleClose()
            console.log('res ===>', res)
        } catch (error) {
            message.error('创建失败')
        }
    }
    return (
        <Modal title="新增图书" open={props.isOpen} onOk={handleOk} onCancel={() => props.handleClose()} okText={'创建'} cancelText={'取消'}>
            <Form form={form} colon={false} {...layout}>
                <Form.Item label="图书名称" name="name" rules={[{ required: true, message: '请输入图书名称!' }]}>
                    <Input />
                </Form.Item>
                <Form.Item label="作者" name="author" rules={[{ required: true, message: '请输入图书作者!' }]}>
                    <Input />
                </Form.Item>
                <Form.Item label="描述" name="desciption" rules={[{ required: true, message: '请输入图书描述!' }]}>
                    <TextArea />
                </Form.Item>
                <Form.Item label="封面" name="cover" rules={[{ required: true, message: '请上传图书封面!' }]}>
                    <Coverupload />
                </Form.Item>
            </Form>
        </Modal>
    )
}
